<template>
  <Layout>
    <Form ref="form1" :model="form1" :label-width="120">

      <Row class="query-form" style="padding-top: 15px">
        <Col span="8">
          <FormItem label="审计计划：">
            <Select v-model="form1.auditPlanId" style="width: 100%">
              <Option v-for="item in jinyu" :value="item.auditPlanId">{{ item.auditPlanName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='企业名称：'>
            <Select class="query-form-el" filterable v-model="form1.auditOrgId"  >
                <Option v-for="item in companyList" :value="item.auditedOrgId" :key="item.auditedOrgName">{{ item.auditedOrgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <Button class="ivu-btn-query" icon="md-search" @click="selects">查询</Button>
        </Col>
      </Row>
    </Form>
    <Card dis-hover>
      <Spin fix v-if="groupNumShow">
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>Loading</div>
      </Spin>
      <div ref="basics" style="height: 300px;"></div>
    </Card>
    <Card dis-hover>
      <Spin fix v-if="groupNumShow">
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>Loading</div>
      </Spin>
      <div ref="scene" style="height: 300px;"></div>
    </Card>
    <Card dis-hover>
      <Spin fix v-if="groupNumShow">
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>Loading</div>
      </Spin>
      <div ref="team" style="height: 300px;"></div>
    </Card>
    <Card dis-hover>
      <Spin fix v-if="groupGradeShow">
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>Loading</div>
      </Spin>
      <div ref="companyAll" style="height: 300px;"></div>
    </Card>
    <Modal :title="title" :transfer=false v-model="model1" :width=1200 footer-hide>
      <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据！"
             :loading="loading" size="small" border :columns="columns1" :data="dataTable">
      </Table>
      <Row style="margin-right:10px;">
        <Col span="24">
          <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                style="float: right" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                show-total show-sizer show-elevator/>
        </Col>
      </Row>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '../../../../api/index.js'
import {sessionStorage} from '../../../../common/cacheUtils.js';
import cascaderDom from '../../../../components/cascader-dom.vue';
import echarts from 'echarts';

export default {
  components: {cascaderDom},
  name: "riskStatical",
  data() {
    return {
      title: '',
      jinyu: [],
      date: ['', ''],
      loading: false,
      tableHeight: '',
      form1: {
        auditPlanId: null,
      },
      type: '',
      pageSizeArray: [10, 20, 50],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      jinyuMap: {},
      groupNumShow: false,
      groupGradeShow: false,
      groupGradeColumnShow: false,
      companyId: sessionStorage('userId').getObject('userId').companyId,
      dataTable: [],
      columns1: [

        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {
          title: '二级集团',
          minWidth: 280,
          align: 'center',
          key: 'twoOrgName',
        },
        {
          title: '审计单位',
          minWidth: 280,
          align: 'center',
          key: 'orgName',
        },
        {
          title: '审计计划',
          minWidth: 150,
          align: 'center',
          key: 'auditPlanName',
        },
        {
          title: '审计任务',
          minWidth: 150,
          align: 'center',
          key: 'missionName',
        },
        {
          title: '带队',
          minWidth: 80,
          align: 'center',
          key: 'supervisor',
        },
        {
          title: '组长',
          minWidth: 80,
          align: 'center',
          key: 'groupLeaderName',
        },

        {
          title: '成员',
          minWidth: 300,
          align: 'center',
          key: 'membersName',
        },
        {
          title: '基础标准得分',
          minWidth: 150,
          align: 'center',
          key: 'calculationBasicsScore',
        },
        {
          title: '现场标准得分',
          minWidth: 150,
          align: 'center',
          key: 'calculationSceneScore',
        },
        {
          title: '班组标准得分',
          minWidth: 150,
          align: 'center',
          key: 'calculationTeamScore',
        },
        {
          title: '总分',
          minWidth: 150,
          align: 'center',
          key: 'totalScore',
        },
        {
          title: '得分率',
          minWidth: 150,
          align: 'center',
          key: 'scoreRate',

        },
        {
          title: '最终得分',
          minWidth: 150,
          align: 'center',
          key: 'finalScore',

        },
        {
          title: '评级',
          minWidth: 150,
          align: 'center',
          key: 'level',

        }

      ],
      companyAll: [],
      model1: false,
      companyList: [],
      model2: false,
      buttonDisabled: false,
      InputData: {},
      statistical: {},
      basics: [],
      scene: [],
      team: [],
    }
  },
  mounted() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    // this.query()
    this.selectCodingSort();
    // this.queryCompanyList();

  },
  computed: {},
  methods: {
    selects() {
      if (this.form1.auditPlanId) {
        this.selectGroupNum();
        this.selectAll();
      }
    },
    queryCompanyList() {
      let _this = this;
      this.$http.get(Api.queryTwoAuditCompanyList + "/" + sessionStorage('userId').getObject('userId').userId).then((res) => {
        _this.companyList = res.data.data;
      });
    },
    selectCodingSort() {
      let _this = this;
      this.$http.get(Api.queryAdtPlanTwo).then((res) => {
        _this.jinyu = res.data.data;
        if (_this.jinyu.length != 0) {
          _this.form1.auditPlanId = _this.jinyu[0].auditPlanId;
          _this.jinyuMap = {};
          _this.jinyu.forEach(item => {
            _this.jinyuMap[item.auditPlanId] = item;
          });
        }
      });
    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
    select() {

    },
    query(name, type) {
      this.loading = true;
      let data = {
        startPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,
      };
      if (type === '1') {
        this.form1.twoOrgName = name;
        this.form1.level = null;
      } else if (type === '2') {
        this.form1.level = name;
        this.form1.twoOrgName = null;
      }
      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
      let url = Api.queryAuditTwoRank;
      this.$http.get(url, {params: data}).then((res) => {
        this.dataTable = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
        this.loading = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    reset() {
      this.form1 = {

      }
      this.$refs.childOrg.resetCurrentOrg();
    },
    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.query();
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.query();
    },
    selectAll(){
      let _this = this;
      _this.groupGradeShow = true;
      let companyAll = echarts.init(this.$refs.companyAll);
      if (!this.form1.auditOrgId){
        this.form1.auditOrgId = sessionStorage('userId').getObject('userId').companyId
      }
      this.$http.get(Api.companyTwoAll ,{params: this.form1}).then((res) => {
        if(res.data.status == '200'){
          _this.companyAll = res.data.data;
        }else if(res.data.status = '202'){
          this.$Message.warning(res.data.msg);

        }
        let basicsOption = this.getCompanyAll();
        companyAll.setOption(basicsOption);
        window.onresize = companyAll.resize;
        _this.groupGradeShow = false;
      }).catch(e => {
        console.log(e)
        this.$Message.error("数据获取失败")
        _this.groupGradeShow = false;
      })
    },
    getCompanyAll() {
      let _this = this;
      let option = {
        title:{
          text:"问题汇总",
          left:'right'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 'left',

        },
        formatter(name) {
          const count = _this.arrCount(_this.companyAll);
          const val = _this.companyAll.filter(item => {
            return item.name === name
          })
          if (val.length != 0){
            return name + '  ' + val[0].value +'  ' +Number((((val[0].value / count).toFixed(4)) * 100).toString().match(/^\d+(?:\.\d{0,2})?/)) + '%'
          }
          return name;

        },
        toolbox: {
          top:30,
          feature:{
            saveAsImage:{type:'png'}
          }
        },
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66','#16CF52','#22CA66'],
        series: [
          {
            name: '问题数量',
            type: 'pie',
            radius: '75%',
            data: this.companyAll,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      return option;

    },
    arrCount(arr) {
      let count = 0
      arr.forEach(item => {
        count = count + item.value
      })
      return count
    },
    selectGroupNum() {
      let _this = this;
      _this.groupNumShow = true;
      let basics = echarts.init(this.$refs.basics);
      let scene = echarts.init(this.$refs.scene);
      let team = echarts.init(this.$refs.team);
      this.basics = [];
      this.scene = [];
      this.team = [];
      if (!this.form1.auditOrgId){
        this.form1.auditOrgId = sessionStorage('userId').getObject('userId').companyId
      }
      this.$http.get(Api.companyTwoNum ,{params: this.form1}).then((res) => {
        if(res.data.status == '200'){
          _this.basics = res.data.data.basics.proMappings;
          _this.scene = res.data.data.scene.proMappings;
          _this.team = res.data.data.team.proMappings;


        }else if(res.data.status = '202'){
          this.$Message.warning(res.data.msg);

        }
        let basicsOption = this.getBasics();
        let sceneOption = this.getScene();
        let teamOption = this.getTeam();
        basics.setOption(basicsOption);
        scene.setOption(sceneOption);
        team.setOption(teamOption);
        window.onresize = basics.resize;
        window.onresize = scene.resize;
        window.onresize = team.resize;

        _this.groupNumShow = false;
      }).catch(e => {
        console.log(e)
        this.$Message.error("数据获取失败")
        _this.groupNumShow = false;
      })
    },
    //审计基础标准
    getBasics() {
      let _this = this;
      let option = {
        title:{
          text:"安全审计基础问题",
          left:'right'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 'left',

        },
        formatter(name) {
          const count = _this.arrCount(_this.basics);
          const val = _this.basics.filter(item => {
            return item.name === name
          })
          if (val.length != 0){
            return name + '  ' + val[0].value +'  ' +Number((((val[0].value / count).toFixed(4)) * 100).toString().match(/^\d+(?:\.\d{0,2})?/)) + '%'
          }
          return name;

        },
        toolbox: {
          top:30,
          feature:{
            saveAsImage:{type:'png'}
          }
        },
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66','#16CF52','#22CA66'],
        series: [
          {
            name: '问题数量',
            type: 'pie',
            radius: '75%',
            data: this.basics,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      return option;

    },

    //审计现场
    getScene() {
      let _this = this;
      let option = {
        title:{
          text:"安全审计现场问题",
          left:'right',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 'left',

        },
        toolbox: {
          top:30,
          feature:{
            saveAsImage:{type:'png'}
          }
        },
        formatter(name) {
          const count = _this.arrCount(_this.scene);
          const val = _this.scene.filter(item => {
            return item.name === name
          })
          if (val.length != 0){
            return name + '  ' + val[0].value +'  ' +Number((((val[0].value / count).toFixed(4)) * 100).toString().match(/^\d+(?:\.\d{0,2})?/)) + '%'
          }
          return name;

        },
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66','#16CF52','#22CA66'],
        series: [
          {

            name: '问题数量',
            type: 'pie',
            radius: '75%',
            data: this.scene,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      return option;

    },
    //审计班组
    getTeam() {
      let _this = this;
      let option = {
        title:{
          text:"安全审计班组问题",
          left:'right'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 'left',

        },
        toolbox: {
          top:30,
          feature:{
            saveAsImage:{type:'png'}
          }
        },
        formatter(name) {
          const count = _this.arrCount(_this.team);
          const val = _this.team.filter(item => {
            return item.name === name
          })
          if (val.length != 0){
            return name + '  ' + val[0].value +'  ' +Number((((val[0].value / count).toFixed(4)) * 100).toString().match(/^\d+(?:\.\d{0,2})?/)) + '%'
          }
          return name;

        },
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66','#16CF52','#22CA66'],
        series: [
          {

            name: '问题数量',
            type: 'pie',
            radius: '75%',
            data: this.team,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      return option;

    },

  },
  watch: {
    'form1.auditPlanId': {
      handler(v) {
        debugger;
        let auditPlanId = v;
        let item = this.jinyuMap[auditPlanId]
        this.companyList = item.missionList;
      }
    }
  }
}
</script>

<style scoped>
@import '../../../../index.css';

.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
</style>
